<template>
    <div>
      <el-input
        v-model="searchValue"
        placeholder="请输入电话号码、姓名或 ID"
      />
      <el-button @click="handleSearch">搜索</el-button>
      <!-- 这里可以添加显示搜索结果的表格 -->
      <el-table :data="searchResults" v-if="searchResults.length > 0">
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="phone" label="电话号码" />
      </el-table>
      <p v-else-if="searched">暂无搜索结果</p>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref } from 'vue';
  import { useCool } from '/@/cool';
  import { ElMessage } from 'element-plus';
  
  const { service } = useCool();
  const searchValue = ref('');
  const searchResults = ref([]);
  const searched = ref(false);
  
  const handleSearch = async () => {
    searched.value = true;
    try {
      const params = {
        value: searchValue.value
      };
      const res = await service.student.student.page(params);
      if (res && res.data) {
        searchResults.value = res.data.list || [];
      }
    } catch (error) {
      console.error('搜索学员失败:', error);
      ElMessage.error('搜索学员失败');
    }
  };
  </script>
  
  <style scoped>
  /* 可以在这里添加自定义样式 */
  </style>